
<template>
  <div id="app">
    <home-nav class="home-nav" v-show="isShow">
      <div slot="center">购物街</div>
    </home-nav>
    <transition>
      <keep-alive exclude='detail'>
        <router-view></router-view>
      </keep-alive>
    </transition>
    <main-bar v-show="isShow" />
  </div>
</template>

<script>
import HomeNav from 'components/common/navbar/NavBar'
import MainBar from 'components/content/mainbar/MainBar'
export default {
  components: { HomeNav, MainBar },

  data() {
    return {
      isShow: false
    }
  },
  watch: {
    $route(to, from) {
      this.isShow = to.path.indexOf('/detail') === -1
    }
  }
}
</script>

<style scoped>
#app {
  overflow: hidden;
}
.home-nav {
  color: #fff;
  background-color: var(--color-tint);
  line-height: 44px;
  font-weight: 700;
}
</style>